<template>
    <l-layout class="l-tab-page erpCase" v-show="!lr_loadPage">

        <l-panel v-if="!showDetails" title="公海客户">
            <template #toolLeft>
                <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_Type>
                        <l-select :options="f_TypeOptions" v-model="queryData.f_Type" />
                    </template>
                    <template #f_Source>
                        <l-select :options="f_SourceOptions" v-model="queryData.f_Source" />
                    </template>
                    <template #f_InOpenDate>
                        <el-date-picker v-model="queryData.f_InOpenDate" type="daterange" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </template>
                    <template #f_Name>
                        <el-input v-model="queryData.f_Name" :placeholder="$t('please enter')" />
                    </template>
                </l-query2>
            </template>
            <template #toolRight>
                <l-tool-btns :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()">
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" :loading="tableLoading" :columns="lr_getPageColumns(columns)"
                :dataSource="tableData" :isPage="true" :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage">
                <template v-for="(col, index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))"
                    v-slot:[col.prop]="scope">
                    <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
                        :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
                        :setting="col.setting" :key="index"></l-value-to-label>
                </template>
                <l-table-btns :btnNum="4" :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
            </l-table>
        </l-panel>
        <!-- Details查看 -->
        <transition name="el-zoom-in-center">
            <l-panel v-if="showDetails">
                <template #title>
                    <el-page-header @back="{ showDetails = false }" :content="$t(show_name)" />
                </template>

                <detail-form ref="detailForm"></detail-form>
            </l-panel>
        </transition>
        <!--表单-->
        <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="600" :width="800" @ok="handleSave"
            @close="handleCloseForm" @opened="handleOpenedForm">
            <my-form ref="form" :isReadOnly="formDetails" f_State="1"></my-form>
        </l-dialog>

    </l-layout>
</template>

<script>
import MyForm from '../customer/form'
import DetailForm from '../customer/detailForm'
const api = window.$api.erpcase.customer

export default {
    components: {
        MyForm,
        DetailForm,
    },
    data() {
        return {
            // 
            lr_isPage: true,
            moduleCode: 'ERP_CustomerOpen',

            // query参数
            queryData: {
                f_Type: '',
                f_Source: '',
                f_Name: '',
                f_InOpenDate:'',
            },

            queryItems: [
                { label: '客户类型', prop: 'f_Type' },
                { label: '来源', prop: 'f_Source' },
                {label: '加入时间',prop:'f_InOpenDate'},
                { label: '客户名称', prop: 'f_Name' },
                

            ],

            // 表格参数
            tableLoading: false,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: [
                { label: '客户名称', prop: 'f_Name', align: 'left', dataType: 'input',isNotAutoWrap:true,},
                { label: '客户类型', prop: 'f_Type', align: 'left', dataType: 'mydata', options: [{ "value": " 普通客户", "label": " 普通客户" }, { "value": "重要客户", "label": "重要客户" }, { "value": "SVIP客户", "label": "SVIP客户" }] },
                { label: '联系人', prop: 'f_DefaultName', align: 'left', dataType: 'input' },
                { label: '手机号码', prop: 'f_DefaultPhone', align: 'left', dataType: 'input' },
                { label: '所在行业', prop: 'f_Industry', align: 'left', dataType: 'input' },
                { label: '来源', prop: 'f_Source', align: 'left', dataType: 'mydata', options: [{ "value": "电话销售", "label": "电话销售" }, { "value": "主动来电 ", "label": "主动来电" }, { "value": "客户介绍", "label": "客户介绍" }, { "label": "访问官网", "value": "访问官网" }, { "label": "其他途径", "value": "其他途径" }] },
                // { label: '归属', prop: 'f_ModifyUserName', align: 'left', dataType: 'input' },
                { label: '加入公海日期', prop: 'f_InOpenDate', align: 'left', dataType: 'datetime', format: 'yyyy-MM-dd' },
                { label: '创建人', prop: 'f_CreateUserName', align: 'left', dataType: 'input' },
            ],
            tableBtns: [
                { prop: 'Receive', label: '领取', width: 80 },
                { prop: 'Details', label: 'Details查看' },
                { prop: 'Edit', label: 'Edit' },
                { prop: 'Delete', label: 'Delete' },
            ],

            // 表单参数
            formVisible: false,
            formTitle: '',
            formEditRow: null,
            formEdit: false,
            formDetails: false,

            // 客户Details查看
            detailForm: {},
            show_name:'',
            showDetails: false,
        }
    },
    computed: {


        f_TypeOptions() {
            return [{ "value": "", "label": " 全部" },{ "value": " 普通客户", "label": " 普通客户" }, { "value": "重要客户", "label": "重要客户" }, { "value": "SVIP客户", "label": "SVIP客户" }]
        },
        f_SourceOptions() {
            return [{ "value": "", "label": " 全部" },{ "value": "电话销售", "label": "电话销售" }, { "value": "主动来电 ", "label": "主动来电" }, { "value": "客户介绍", "label": "客户介绍" }, { "label": "访问官网", "value": "访问官网" }, { "label": "其他途径", "value": "其他途径" }]
        },

    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()


        },

        handleSearch() {
            this.loadTableData()
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let queryData = this.$deepClone(this.queryData)

            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_Id'
            queryData.f_State = 1
            let data = await this.$awaitWraper(api.getPage(queryData))
            if (data != null) {
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else {
                this.tableData = []
            }
            this.tableLoading = false
        },

        handleAdd() {
            this.formEdit = false
            this.formDetails = false
            this.handleShowForm('Add')
        },
        handleEdit($index, row) {
            this.formEdit = true
            this.formDetails = false
            this.formEditRow = row
            this.handleShowForm('Edit')
        },
        handleDelete($index, row) {
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--
                await api.remove(row.f_Id)
                this.$message({
                    type: 'success',
                    message: this.$t('Delete  success')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled!')
                })
            })
        },
        async handleDetails($index, row) {
            this.show_name = '客户Details查看'
            this.showDetails = true
            this.detailForm = await this.$awaitWraper(api.get(row.f_Id))
            this.$refs.detailForm.setForm(this.detailForm)
        },
        async handleReceive($index, row) {
            // console.log($index, row)// 在此处添加按钮逻辑
            // await this.$awaitWraper(api.receivecustomer(row.f_Id))
            this.$confirm(this.$t('确认领取该客户吗？'), this.$t('客户领取'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--
                await this.$awaitWraper(api.receivecustomer(row.f_Id))
                this.$message({
                    type: 'success',
                    message: this.$t('领取成功!')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('领取已cancel!')
                })
            })
        },

        async handleSave(showLoading, hideLoading) {
            showLoading('saving data...')
            if (await this.$refs.form.validateForm()) {
                const res = await this.$refs.form.saveForm({ keyValue: this.formEdit ? this.formEditRow.f_Id : '', isEdit: this.formEdit })
                if (res) {
                    const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                    this.$message({
                        type: 'success',
                        message: this.$t(msg)
                    })
                    this.loadTableData()
                    this.formVisible = false
                }
            }
            hideLoading()
        },

        handleShowForm(text) {
            this.formTitle = text
            this.formVisible = true
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('Loading data...')
                await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                hideLoading()
            }
        },
        handleCloseForm() {
            this.$refs.form.resetForm()
        }
    }
}
</script>
